import {ref, reactive, onMounted, onUnmounted} from "vue"

/**
 * 全屏切换hook
 */
export function useDullScreen() {
    const is_full = ref(false)

    /**
     * 获取当前全屏状态
     */
    const getFullScreenStatys = function (): boolean {
        const docu = (document as any)
        return docu.fullScreen || docu.mozFullScreen || docu.webkitIsFullScreen;
    }

    /**
     * 全屏切换处理
     */
    const switchFullScreen = function () {
        const docu = (document as any)
        if (getFullScreenStatys()) {
            if (docu.exitFullscreen) {
                docu.exitFullscreen();
            } else if (docu.mozCancelFullScreen) {
                docu.mozCancelFullScreen();
            } else if (docu.webkitExitFullscreen) {
                docu.webkitExitFullscreen();
            }
        } else {
            let element: any = document.documentElement
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }
        is_full.value = !is_full.value
    }


    return {
        is_full, switchFullScreen
    }
}


/**
 * 监控窗口尺寸变化hook
 */
export function useWindowResize() {
    const size = reactive({
        width: window.innerWidth,
        height: window.innerHeight
    })

    const getWindowSize = function () {
        size.height = window.innerHeight
        size.width = window.innerWidth
    }

    onMounted(() => {
        window.addEventListener('resize', getWindowSize)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', getWindowSize)
    })

    return size
}